<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="box" width=400 height=400></canvas>
</body>
</html>
<script type='qqq' id='vertex'>
  // vec4(x,y,z,w);  position真争气的作用 是（x/w,y/w,z/w）
  void main(){
    gl_PointSize = 100.0;
    gl_Position = vec4(1.0,0.0,0.0,1.0);
  }
</script>
<script type='qqq' id='fragment'>
  
  void main(){
    gl_FragColor = vec4(0.0,0.5,0.6,1.0);
  }
</script>
<script>
  /** @type {HTMLCanvasElement} */  // 可以提示语法
  var box = document.getElementById('box');
  var gl = box.getContext("webgl");
  gl.clearColor(0.0,1.0,0.5,0.5);
  console.log(gl.COLOR_BUFFER_BIT)
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 画个点
  // 顶点着色器   片元着色器（可以简单理解成css像素）

  // 创造顶点着色器对象
  // gl.createShader(type) 根据对应的type类型创造对应的着色器对象
  let vertexshader = gl.createShader(gl.VERTEX_SHADER)

  // 创造片元着色器对象
  let fragmentshader = gl.createShader(gl.FRAGMENT_SHADER)

  // console.log(vertexshader,fragmentshader)
  //gl_PointSize、gl_Position  GLSL的内置变量
  // vec4 是GLSL的一种数据类型，四维向量 每一个分量都是一个小数
  // attribute  vec4 qqq; // var  int qqq;
  // vec4(1.0,1.0,1.0,1.0)  // String(1)



  /* let vertextShaderSource = `
    void main(){
      gl_PointSize = 20.0;
      gl_Position = vec4(0.0,0.0,0.0,1.0);
    }
  `;
  let fragmentShaderSource = `
    void main(){
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `; */
  let vertextShaderSource = document.getElementById('vertex').innerText;
  let fragmentShaderSource = document.getElementById('fragment').innerText;
  // 以上我们创造的两个字符串 其实就是GLSL语言


  // 我们在上边 创造了两个 shader对象（容器），我们接下来需要把容器和着色器绑定
  gl.shaderSource(vertexshader,vertextShaderSource);
  gl.shaderSource(fragmentshader,fragmentShaderSource);


  // 下边 我们开始 编译 这两个着色器， 编译成GPU能执行的代码
  gl.compileShader(vertexshader)
  gl.compileShader(fragmentshader)

  // 下边把编译好的代码执行
  // 执行需要依赖一个程序
  // 创造一个程序
  let program = gl.createProgram();

  // 把编译好的代码 关联到 这个程序上（可以理解成我们的传参）
  gl.attachShader(program, vertexshader)
  gl.attachShader(program, fragmentshader)

  // 下一步 把 程序 链接到  gl上；
  gl.linkProgram(program);

  // 使用这个程序
  gl.useProgram(program);

  // 最后这一步才是画图
  gl.drawArrays(gl.POINTS,0,10)




</script>